<template>
  <div class="quoteInformation">
    <div class="quoteContainer">
      <div class="InformationsNews">
        <quote-title :pushTitle="informationsNews">
          <span slot="quoteTitle">SAP(四川)产业赋能中心-资讯新闻</span>
        </quote-title>
        <quote-cardt :articleList="newsList"></quote-cardt>
      </div>
      <div class="ExpertArticles">
        <quote-title :pushTitle="expertArticles">
          <span slot="quoteTitle">SAP(四川)产业赋能中心-专家文章</span>
        </quote-title>
        <quote-cardt :articleList="ExpertList"></quote-cardt>
      </div>
      <div class="SharingData">
        <quote-title :pushTitle="sharingData">
          <span slot="quoteTitle">SAP(四川)产业赋能中心-共享资料</span>
        </quote-title>
        <share-card :articleList="NasList"></share-card>
      </div>
      <div class="CustomerCase">
        <quote-title :pushTitle="custormerCase">
          <span slot="quoteTitle">SAP(四川)产业赋能中心-客户案例</span>
        </quote-title>
        <customer-card :articleList="CustomerList"></customer-card>
      </div>
    </div>
  </div>
</template>

<script>
import swiperList from "../../components/quoteHome/swiper.vue";
import quoteCard from "../../components/quoteHome/quoteCard";
import quoteTitle from "../../components/quoteHome/title";
import customerCard from "../../components/quoteHome/customerCard";
import shareCard from "../../components/quoteHome/shareCard";
import quoteCardt from "../../components/quoteHome/quoteCard2";
import { ReqArticle } from "../../request/index";
import { ReqNas } from "../../request/index";
export default {
  data() {
    return {
      newsList: [],
      ExpertList: [],
      NasList: [],
      CustomerList: [],
      informationsNews: "informationsNews",
      expertArticles: "expertArticles",
      sharingData: "sharingData",
      custormerCase: "custormerCase"
    };
  },
  components: {
    swiperList,
    quoteCard,
    quoteTitle,
    customerCard,
    shareCard,
    quoteCardt
  },
  async created() {
    await this.getNews();
    await this.getNas();
    await this.getExpert();
    await this.getCustomer();
  },
  methods: {
    //获取资讯文章
    async getNews() {
      let data = {
        limit: 4,
        page: 1,
        type: 1
      };
      let resNews = await ReqArticle(data);
      resNews.page.list.sort(function(a, b) {
        return a.gmtCreated < b.gmtCreated ? 1 : -1;
      });
      this.newsList = resNews.page.list;
    },
    //获取专家文章
    async getExpert() {
      let data = {
        limit: 4,
        page: 1,
        type: 2
      };
      let resExpert = await ReqArticle(data);
      resExpert.page.list.sort(function(a, b) {
        return a.gmtCreated < b.gmtCreated ? 1 : -1;
      });
      this.ExpertList = resExpert.page.list;
    },
    //获取NAS
    async getNas() {
      let data = {
        limit: 4,
        page: 1
      };
      let resNas = await ReqNas(data);
      resNas.page.list.sort(function(a, b) {
        return a.gmtCreated < b.gmtCreated ? 1 : -1;
      });
      this.NasList = resNas.page.list;
    },
    //获取客户案例
    async getCustomer() {
      let data = {
        limit: 4,
        page: 1,
        type: 4
      };
      let resCustomer = await ReqArticle(data);
      resCustomer.page.list.sort(function(a, b) {
        return a.gmtCreated < b.gmtCreated ? 1 : -1;
      });
      this.CustomerList = resCustomer.page.list;
    }
  }
};
</script>

<style>
a {
  text-decoration: none;
  color: black;
}
.quoteInformation {
  width: 100%;
  height: auto;
  background-color: rgb(245, 245, 245);
}
.quoteInformation .quoteContainer {
  padding-bottom: 20px;
  width: 70%;
  margin: 0 auto;
}
.quoteInformation .InformationsNews,
.quoteInformation .ExpertArticles,
.quoteInformation .SharingData,
.quoteInformation .CustomerCase {
  margin-top: 20px;
}
@media screen and (max-width: 1530px) {
  .quoteInformation .quoteContainer {
    width: 80%;
  }
}
@media screen and (max-width: 1370px) {
  .quoteInformation .quoteContainer {
    width: 90%;
  }
}
@media screen and (max-width: 1196px) {
  .quoteInformation .quoteContainer {
    width: 100%;
  }
}
</style>